import ApiFetchers from "@/apis/api_fetchers"
import { useElementSize } from "@/features/useElementSize"
import { PageHeader } from "@/pages/AccountPage/components/PageHeader"
import { GridGameList } from "@/pages/HomePage/components/GridGameList"
import styled from "@emotion/styled"
import { useNavigate, useParams } from "react-router-dom"
import { GameCardItem } from "@/pages/HomePage/components/GameCardItem"
import { usePaginatedList } from "@/pages/HomePage/hooks/usePaginatedRequest"
import { RefGameListItem } from "@/apis/home_page_constant_types"
import { getGameTypeBySection } from "@/features/business/HomePage_deprecated/constant"

const Root = styled.div`
    width: 100vw;
    background-color: #f5f5f5;
    flex: 1;
    display: flex;
    flex-direction: column;
`
const Content = styled.div`
    flex: 1;
`
const Favorite = () => {
    const navigate = useNavigate()
    const { sectionId = "" } = useParams<{ sectionId: string }>()
    const { elementRef, size } = useElementSize<HTMLDivElement>()
    const { list, loading, noMore, loadMore } = usePaginatedList({
        initialQuery: {
            game_type: getGameTypeBySection(sectionId),
            is_hot: ["hot", "hot games"].includes(sectionId.toLowerCase()) ? "1" : "0",
            is_new: sectionId.toLowerCase() === "new" ? "1" : "0",
        },
        // @ts-ignore
        fetcher: ApiFetchers.refGetGameList,
        reloadDeps: [sectionId],
    })

    return (
        <Root>
            <PageHeader
                sticky={true}
                title={sectionId}
                iconType="black-arrow"
                textColor="#131416"
                backgroundColor="#fff"
                onBack={() => {
                    navigate(-1)
                }}
            />
            <Content ref={elementRef}>
                <GridGameList<RefGameListItem>
                    list={list}
                    height={size?.height ?? 0}
                    itemContent={(index, game) => {
                        return (
                            <GameCardItem
                                {...game}
                                key={`games_game_item__${index}`}
                            />
                        )
                    }}
                    onLoadMore={() => {
                        if (!noMore && !loading) {
                            loadMore()
                        }
                    }}
                    isLoading={loading}
                />
            </Content>
        </Root>
    )
}

export default Favorite
